<template>
	<view class="inventory">
		<view class="header">
			<view class="moneyup">
				<view class="left-l">
					<text>总资产(人民币)</text>
					<image class="imge" src="@/static/eye.png" mode=""></image>
				</view>
				<text class="today">今日参考盈亏</text>
			</view>
			<view class="mongy">
				<text class="num1">12345.00</text>
				<view class="right">
					<text>+1024.00</text>
					<text>\n+6.66%</text>
				</view>
			</view>
			<view class="moneydown">
				<view class="box">
					<text class="tx">持有市值</text>
					<text class="num">\n1234.02</text>
				</view>
				<view class="box">
					<text class="tx">浮动市值</text>
					<text class="num">\n1234.02</text>
				</view>
				<view class="box">
					<text class="tx">可用</text>
					<text class="num">\n1234.02</text>
				</view>
			</view>
		</view>

		<view class="main">
			<view class="head">
				<text>股票/市值</text>
				<text>持仓/可用</text>
				<text>盈亏</text>
			</view>
		</view>
		<view class="end">
			<view class="head">
				<text>西部德利</text>
				<text>280</text>
				<text>5.61</text>
			</view>
			<view class="head">
				<text>983.15</text>
				<text>0</text>
				<text>0.632%</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		},

	}
</script>

<style scoped lang="scss">
	.header {
		width: 670rpx;
		height: 350rpx;
		background-color: #3297E5;
		border-radius: 20rpx;
		margin: 56rpx auto;
		padding: 24rpx;

		.moneyup {
			display: flex;
			justify-content: space-between;

			.left-l {
				font-size: 24rpx;
				color: #FBFDFE;

				.imge {
					width: 35rpx;
					height: 35rpx;
					vertical-align: middle;
					margin-left: 20rpx;
				}
			}

			.today {
				font-size: 24rpx;
				color: #FBFDFE;
			}
		}

		.mongy {
			display: flex;
			justify-content: space-between;
			margin-top: 30rpx;
			border-bottom: 1px solid #5EAAE5;
			height: 160rpx;

			.num1 {
				width: 288rpx;
				height: 92rpx;
				font-family: DINPro;
				font-size: 72rpx;
				font-weight: normal;
				font-stretch: normal;
				line-height: 92rpx;
				letter-spacing: 0rpx;
				color: #ffffff;
			}

			.right {
				color: #FBFDFE;
				text-align: center;


			}
		}

		.moneydown {
			// border: 1px solid;
			margin-top: 12rpx;
			color: #FBFDFE;
			height: 80rpx;
			font-size: 30rpx;
			display: flex;
			line-height: 60rpx;

			.box {
				width: 33%;
				flex-grow: 1;
				align-items: 1;
				text-align: center;

				// border: 1px solid;
				&:nth-of-type(1) {
					text-align: left;
					width: 90rpx;
				}

				&:nth-of-type(2) {
					width: 200rpx;
				}

				&:nth-of-type(3) {
					width: 90rpx;
				}

				.num {
					width: 126rpx;
					height: 46rpx;
					font-family: DINPro;
					font-size: 36rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 46rpx;
					letter-spacing: 0rpx;
					color: #ffffff
				}

				.tx {
					width: 96rpx;
					height: 34rpx;
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					font-stretch: normal;
					line-height: 34rpx;
					letter-spacing: 0rpx;
					color: #eeeeee;
				}
			}


		}
	}

	.main {
		height: 120rpx;

		margin-top: 48rpx;
		border-top: 1px solid #F2F2F2;
		border-bottom: 1px solid #F2F2F2;

		.head {
			display: flex;
			margin-top: 48rpx;
			justify-content: space-between;
			padding: 0rpx 40rpx;

			font-family: PingFang SC;
			font-size: 32rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 44rpx;
			letter-spacing: 0rpx;
			color: #323232;
		}
	}

	.end {
		height: 120rpx;

		margin-top: 48rpx;


		.head {
			display: flex;
			margin-top: 24rpx;
			justify-content: space-between;
			padding: 0rpx 40rpx;
			font-family: DIN;
			font-size: 40rpx;
			font-weight: normal;
			font-stretch: normal;
			line-height: 48rpx;
			letter-spacing: 0rpx;
			color: #323232;
			text:nth-of-type(3){
				color: #ff3a3a;
			}
		}
	}
</style>
